<template>
  <div class="refunds-page">
    <h2>我的退货记录</h2>

    <!-- 退货记录列表 -->
    <div v-loading="loading" class="refunds-list">
      <el-empty v-if="!loading && refunds.length === 0" description="暂无退货记录" />
      
      <div v-for="refund in refunds" :key="refund.id" class="refund-card">
        <div class="refund-header">
          <span class="order-no">订单号：{{ refund.orderNo }}</span>
          <el-tag :type="getStatusType(refund.status)">{{ getStatusText(refund.status) }}</el-tag>
        </div>
        
        <div class="refund-content">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="label">退款金额：</span>
                <span class="value amount">¥{{ refund.refundAmount }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">申请时间：</span>
                <span class="value">{{ formatDate(refund.createTime) }}</span>
              </div>
            </el-col>
          </el-row>
          
          <div class="info-item">
            <span class="label">退货原因：</span>
            <span class="value">{{ refund.refundReason }}</span>
          </div>
          
          <div v-if="refund.status !== 'pending'" class="info-item">
            <span class="label">处理人：</span>
            <span class="value">{{ refund.handlerName || '暂无' }}</span>
          </div>
          
          <div v-if="refund.handleTime" class="info-item">
            <span class="label">处理时间：</span>
            <span class="value">{{ formatDate(refund.handleTime) }}</span>
          </div>
          
          <div v-if="refund.handleRemark" class="info-item">
            <span class="label">处理备注：</span>
            <span class="value">{{ refund.handleRemark }}</span>
          </div>
        </div>
        
        <div class="refund-footer">
          <el-button 
            v-if="refund.status === 'pending'" 
            type="danger" 
            size="small" 
            plain 
            @click="handleCancelRefund(refund)">
            取消申请
          </el-button>
          <el-button type="primary" size="small" plain @click="viewOrderDetail(refund)">
            查看订单
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMyRefundList, cancelRefund } from '@/api/refund'
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)
const refunds = ref([])

// 加载退货记录列表
const loadRefunds = async () => {
  loading.value = true
  try {
    const res = await getMyRefundList()
    if (res.code === 200) {
      refunds.value = res.data
    } else {
      ElMessage.error(res.message || '加载退货记录失败')
    }
  } catch (error) {
    console.error('加载退货记录失败', error)
    ElMessage.error('加载退货记录失败')
  } finally {
    loading.value = false
  }
}

// 取消退货申请
const handleCancelRefund = (refund) => {
  ElMessageBox.confirm('确定要取消这个退货申请吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await cancelRefund(refund.id)
      if (res.code === 200) {
        ElMessage.success('退货申请已取消')
        loadRefunds()
      } else {
        ElMessage.error(res.message || '取消退货申请失败')
      }
    } catch (error) {
      console.error('取消退货申请失败', error)
      ElMessage.error('取消退货申请失败')
    }
  }).catch(() => {})
}

// 查看订单详情
const viewOrderDetail = (refund) => {
  router.push(`/customer/orders/${refund.orderId}`)
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    completed: 'success'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: '待处理',
    approved: '已同意',
    rejected: '已拒绝',
    completed: '已完成'
  }
  return textMap[status] || status
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  loadRefunds()
})
</script>

<style scoped lang="scss">
.refunds-page {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }

  .refunds-list {
    .refund-card {
      margin-bottom: 20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .refund-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        background: #f7f8fa;
        border-bottom: 1px solid #ebeef5;

        .order-no {
          font-size: 14px;
          color: #606266;
          font-weight: 500;
        }
      }

      .refund-content {
        padding: 20px;

        .info-item {
          margin-bottom: 12px;
          font-size: 14px;
          line-height: 1.8;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #909399;
            margin-right: 10px;
          }

          .value {
            color: #303133;

            &.amount {
              color: #f56c6c;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }

      .refund-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 15px 20px;
        background: #f7f8fa;
        border-top: 1px solid #ebeef5;
      }
    }
  }
}
</style>





